<template>
  <div class="box">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="box1">
      <el-amap-marker v-for="(marker, index) in markers"
        :position="marker.position"
        :vid="index"
        :key="index"
      >
      </el-amap-marker>
    </el-amap>
    <div class="toolbar">
        <button type="button" name="button" v-on:click="changePosition">toggle first marker</button>
        <button type="button" name="button" v-on:click="addMarker">add marker</button>
        <button type="button" name="button" v-on:click="removeMarker">remove marker</button>
        <router-link to='/map1'>
          <button type="button" >跳转</button>
        </router-link>
      </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      zoom: 16,
      center: [110.919229, 21.659751],
      markers: [
        {
          position: [110.919229, 21.659751]
        }
      ]
    }
  },
  methods: {
    onClick () {
      this.count += 1
    },
    changePosition () {
      let position = this.markers[0].position
      this.markers[0].position = [position[0] + 0.002, position[1] - 0.002]
    },
    addMarker () {
      console.log('asdas')
      let marker = {
        position: [110.919229 + (Math.random() - 0.5) * 0.02, 21.659751 + (Math.random() - 0.5) * 0.02]
      }
      this.markers.push(marker)
    },
    removeMarker () {
      if (!this.markers.length) return
      this.markers.splice(this.markers.length - 1, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    width:100%;
    height:500px;
  }
  .box1 {
    width:100%;
    height: 400px;
  }
  .toolbar button {
     width:100%;
     height: 25px;
     background-color: chocolate;
  }
</style>
